import React from 'react';
import AppLayout from '../layout/AppLayout';
import { getChipsWithPrimary } from '../utils/chipConfig';
import './form.css';
import './scaffold.css';

export default function SimulationConfigGeneral() {
  const chips = getChipsWithPrimary('配置', '/simulation-config-general');

  return (
    <AppLayout active="文件" chips={chips}>
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <button className="config-subtab active">
            <span style={{ fontSize: 20 }}>☰</span>
            <span>通用</span>
          </button>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>📄</span>
            <span>记录</span>
          </button>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>💾</span>
            <span>保存配置</span>
          </button>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>🕸️</span>
            <span>网络属性</span>
          </button>
        </div>
      </div>

      <div className="form-2col">
        <div className="card">
          <div className="field">
            <label>持续时间（毫秒）</label>
            <div className="input">1000</div>
          </div>
          <div className="field">
            <label>时间步长（毫秒）</label>
            <div className="input">0.1</div>
          </div>
          <div className="field">
            <label>打印运行时间的间隔（秒）</label>
            <div className="input">0.1</div>
          </div>
          <div className="field">
            <label>添加新的全局参数设置（温度、初始电压等）</label>
            <div className="row">
              <div className="chip-list">
                <span className="chip-soft">温度(摄氏度):6.3 初始电压:-65 钳位电阻: 0.001 <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
              </div>
              <button className="btn-circle">＋</button>
            </div>
          </div>
          <div className="field">
            <label>添加新的随机数生成器种子</label>
            <div className="row">
              <div className="chip-list">
                <span className="chip-soft">连接:1 刺激:1 位置:1 细胞: 1 <span style={{ cursor: 'pointer', marginLeft: 8 }}>✕</span></span>
              </div>
              <button className="btn-circle">＋</button>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="switch-list">
            <div className="switch-item"><span className="switch on" /> 创建 NEURON 对象</div>
            <div className="switch-item"><span className="switch on" /> 创建 Python 结构</div>
            <div className="switch-item"><span className="switch off" /> 添加突触机制</div>
            <div className="switch-item"><span className="switch on" /> 包含参数规则标签</div>
            <div className="switch-item"><span className="switch on" /> 显示计时</div>
            <div className="switch-item"><span className="switch off" /> 详细模式</div>
            <div className="switch-item"><span className="switch off" /> 使用紧凑的连接格式(用列表替代字典)</div>
            <div className="switch-item"><span className="switch on" /> 从列表中选择随机区域进行连接</div>
            <div className="switch-item"><span className="switch on" /> 打印群体平均发放率</div>
            <div className="switch-item"><span className="switch on" /> 打印总连接数</div>
            <div className="switch-item"><span className="switch on" /> 仅收集模拟输出数据</div>
            <div className="switch-item"><span className="switch on" /> 使用 CVode 高效缓存</div>
            <div className="switch-item"><span className="switch on" /> 使用 CVode (高效微分方程求解器)</div>
          </div>
        </div>
      </div>
    </AppLayout>
  )
}

